<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试laydate的render的异常相信</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="js/layui/v2.3.0/src/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div id="tools" class="layui-btn-container" style="margin-left: 110px;">
    <button class="layui-btn layui-btn-primary" lay-even="resetValue">清空时间</button>
    <br><br>
    <button class="layui-btn" lay-even="renderLaydate">切换为时间选择且只能选小时和分钟</button>
    <button class="layui-btn layui-btn-warm" lay-even="renderLaydate2">切换成range</button>
    <button class="layui-btn layui-btn-danger" lay-even="renderLaydate3">只能选周一</button>
    <br>
    <button class="layui-btn layui-btn-primary" lay-even="renderLaydate4">新增按钮0点、正午</button>
    <button class="layui-btn layui-btn-primary" lay-even="renderLaydate5">新增关闭按钮</button>
    <button class="layui-btn layui-btn-primary" lay-even="renderLaydate6">超出min max的上下一个月不可选</button>
</div>
<script src="js/layui/v2.3.0/src/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<form class="layui-form" id="my_form" style="margin-top: 10px;"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">选择时间1</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="date1" lay-key="1">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">时间范围</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input laydate-range-my laydate-range-my-start" name="dateStart"
                       placeholder="开始时间">
            </div>
            <div class="layui-form-mid">~</div>
            <div class="layui-input-inline">
                <input type="text" class="layui-input laydate-range-my laydate-range-my-end" name="dateEnd"
                       placeholder="结束时间">
            </div>
        </div>
    </div>

    <!--<i class="layui-icon" id="myIcon" data-icon="&#xe60c;">&#xe60c;</i><div>{{=&#xe60c;}}</div>-->
</form>

<script>
    var isArray = function (obj) {
        return Object.prototype.toString.call(obj) === '[object Array]';
    };
    // layui.config({
    //     base: 'js/module/'
    // }).extend({
    //     myIndex: 'index'
    // });
    // layui.use('myIndex', function (myIndex) {
    //     myIndex.sayHello();
    // });
    layui.use(['jquery', 'laydate', 'layer', 'laytpl'], function ($, laydate, layer, laytpl) {


        var laydateObj = {};
        var laydateSetting = {};

        // 更新开始世界或者结束时间的laydate
        var updateLaydate = function (elem, value) {
            elem = $(elem[0]);
            var settingTemp = {};
            var statusCurr = elem.hasClass('laydate-range-my-start') ? 'start' : 'end';
            var elementTarget = elem.closest('.layui-inline')
                .find('.laydate-range-my-' + (statusCurr === 'start' ? 'end' : 'start'));
            value && (settingTemp[statusCurr === 'start' ? 'min' : 'max'] = value);
            settingTemp.elem = elementTarget[0];
            laydate.render($.extend(true, {}, laydateSetting[elementTarget.attr('name')] || {}, settingTemp));
        };

        // 开始时间的初始配置信息
        laydateSetting.dateStart = {
            elem: '[name="dateStart"]',
            done: function (value, date, endDate) {
                updateLaydate(this.config.elem, value);
            },
            change: function () {
                var elem = $(this.elemMain[0]);
                var contentElem = $(this.elemCont);
                elem.find('.layui-laydate-header').find('i').show();
                var tdDisabeld = contentElem.find('td.laydate-disabled');
                if (tdDisabeld.length) {
                    if(!tdDisabeld.first().prev().length) {
                        elem.find('i.laydate-prev-m,i.laydate-prev-y').hide();
                    }
                    if(!tdDisabeld.last().next().length) {
                        elem.find('i.laydate-next-m,i.laydate-next-y').hide();
                    }
                }
            },
            ready: function (date) {
                var elem = $(this.elemMain[0]);
                var contentElem = $(this.elemCont);
                elem.find('.layui-laydate-header').find('i').show();
                var tdDisabeld = contentElem.find('td.laydate-disabled');
                if (tdDisabeld.length) {
                    if(!tdDisabeld.first().prev().length) {
                        elem.find('i.laydate-prev-m,i.laydate-prev-y').hide();
                    }
                    if(!tdDisabeld.last().next().length) {
                        elem.find('i.laydate-next-m,i.laydate-next-y').hide();
                    }
                }
            }
        };
        // 结束时间的初始配置信息
        laydateSetting.dateEnd = {
            elem: '[name="dateEnd"]',
            done: function (value, date, endDate) {
                updateLaydate(this.config.elem, value);
            },
            change: function () {
                var elem = $(this.elemMain[0]);
                var contentElem = $(this.elemCont);
                elem.find('.layui-laydate-header').find('i').show();
                var tdDisabeld = contentElem.find('td.laydate-disabled');
                if (tdDisabeld.length) {
                    if(!tdDisabeld.first().prev().length) {
                        elem.find('i.laydate-prev-m,i.laydate-prev-y').hide();
                    }
                    if(!tdDisabeld.last().next().length) {
                        elem.find('i.laydate-next-m,i.laydate-next-y').hide();
                    }
                }
            },
            ready: function (date) {
                var elem = $(this.elemMain[0]);
                var contentElem = $(this.elemCont);
                elem.find('.layui-laydate-header').find('i').show();
                var tdDisabeld = contentElem.find('td.laydate-disabled');
                if (tdDisabeld.length) {
                    if(!tdDisabeld.first().prev().length) {
                        elem.find('i.laydate-prev-m,i.laydate-prev-y').hide();
                    }
                    if(!tdDisabeld.last().next().length) {
                        elem.find('i.laydate-next-m,i.laydate-next-y').hide();
                    }
                }
            }
        };

        // 初始化
        laydateObj.dateStart = laydate.render(laydateSetting.dateStart);
        laydateObj.dateEnd = laydate.render(laydateSetting.dateEnd);

        laydate.render({
            elem: '[name="dateEnd"]',
            // ,weekStart: 6
            done: function (value, date, endDate) {
                laydate.render({
                    elem: '[name="dateStart"]',
                    // ,weekStart: 6
                    done: function (value, date, endDate) {
                        laydate.render({
                            elem: '[name="dateEnd"]',
                            // ,weekStart: 6
                            done: function (value, date, endDate) {

                            }
                        });
                    }
                });
            }
        });

        laydate.render({
            elem: '#date1',
            // ,weekStart: 6
            showBottom: false,
            range: true,
            done: function (value, date, endDate) {
                var that = this;
                that.setValue(value);
                setTimeout(function () {
                    that.remove();
                }, 300);
            }
        });


        var active = {
            resetValue: function () {
                $('#date1').val('').parent().click();
            },
            renderLaydate: function () {
                active.resetValue();
                $('#date1').css({width: '190px'});
                laydate.render({
                    elem: '#date1',
                    type: 'datetime',
                    format: 'yyyy-MM-dd HH:mm',
                    // min: 0,
                    // showBottom: false,
                    // range: true,
                    change: function (value, date, endDate) {
                        // 切换会调用
                        var elem = $(this.elemCont);
                        // 找到second的列
                        var secondList = elem.find('ul.laydate-time-list').find('>li').last();
                        // 添加不可选的关键样式
                        secondList.addClass('laydate-disabled').hide();
                        // 给秒的li都加上不可选的并且去掉默认选中的
                        secondList.find('li').removeClass('layui-this').addClass('laydate-disabled').hide();

                        var minuteList = secondList = elem.find('ul.laydate-time-list').find('>li').eq(1);
                        // 分钟隔10分钟显示
                        layui.each(minuteList.find('li'), function (liIndex, liElem) {
                            liElem = $(liElem);
                            var value = parseInt(liElem.text());
                            if (value%10 !== 0) {
                                liElem.hide();
                            }
                        });
                    },
                    ready: function (date) {
                        // 初始会调用
                        // elemCont 为控件中实际的内容的dom
                        var elem = $(this.elemCont);
                        // 找到second的列
                        var secondList = elem.find('ul.laydate-time-list').find('>li').last();
                        // 添加不可选的关键样式
                        secondList.addClass('laydate-disabled').hide();
                        // 给秒的li都加上不可选的并且去掉默认选中的
                        secondList.find('li').removeClass('layui-this').addClass('laydate-disabled').hide();
                    }
                });
            }
            , renderLaydate2: function () {
                active.resetValue();
                $('#date1').css({width: '300px'});
                laydate.render({
                    elem: '#date1',
                    type: 'datetime',
                    // min: 0,
                    range: '~',
                    ready: function (date) {
                        if (!$(this.bindElem).val()) {
                            $(this.elemMain[0]).find('i.laydate-prev-m').click();
                        }
                    }
                });
            }
            , renderLaydate3: function () {
                active.resetValue();
                $('#date1').css({width: '190px'});
                laydate.render({
                    elem: '#date1',
                    change: function (value, date, endDate) {
                        // 这个在点击上面的上个月下个月之后都会换到另外一页，所以需要跟ready一样处理哪些不可选哪些可选，实际应用中可以将处理逻辑封装一下调用就可以了。

                        // 切换会调用
                        var elem = $(this.elemCont);
                        layui.each(elem.find('tr'), function (trIndex, trElem) {
                            layui.each($(trElem).find('td'), function (tdIndex, tdElem) {
                                var tdTemp = $(tdElem);
                                if (tdTemp.hasClass('laydate-day-next') || tdTemp.hasClass('laydate-day-prev')) {
                                    return;
                                }
                                if (tdIndex !== 1) {
                                    tdTemp.addClass('laydate-disabled');
                                }
                            });
                        });
                        if (elem.find('.layui-this').hasClass('laydate-disabled')) {
                            elem.find('.layui-this').removeClass('layui-this');
                        }
                        $(this.footer).find('.laydate-btns-confirm, .laydate-btns-now').addClass('laydate-disabled');
                    },
                    ready: function (date) {
                        // 初始会调用
                        var elem = $(this.elemCont);
                        layui.each(elem.find('tr'), function (trIndex, trElem) {
                            layui.each($(trElem).find('td'), function (tdIndex, tdElem) {
                                var tdTemp = $(tdElem);
                                if (tdTemp.hasClass('laydate-day-next') || tdTemp.hasClass('laydate-day-prev')) {
                                    return;
                                }
                                // 除了星期一其他都不可选
                                if (tdIndex !== 1) {
                                    tdTemp.addClass('laydate-disabled');
                                }
                            });
                        });
                        if (elem.find('.layui-this').hasClass('laydate-disabled')) {
                            elem.find('.layui-this').removeClass('layui-this');
                        }
                        // 既然只有周一能选，那么就把现在还有确定按钮干掉
                        $(this.footer).find('.laydate-btns-confirm, .laydate-btns-now').addClass('laydate-disabled');
                    }
                });
            }
            , renderLaydate4: function () {
                active.resetValue();
                $('#date1').css({width: '190px'});
                laydate.render({
                    elem: '#date1',
                    type: 'time',
                    change: function (value, date, endDate) {
                    },
                    ready: function (date) {
                        // 初始会调用
                        var layThat = this
                            , options = layThat.config
                            , dateTime = options.dateTime;
                        var active = {
                            setZero: function () {
                                var thisDate = new Date(new Date().setHours(0, 0, 0, 0));
                                $.extend(dateTime, this.systemDate(), {
                                    hours: thisDate.getHours()
                                    , minutes: thisDate.getMinutes()
                                    , seconds: thisDate.getSeconds()
                                });
                                this.setValue(this.parse()).remove();
                                options.position === 'static' && this.calendar();
                                this.done();
                            },
                            set12: function () {
                                var thisDate = new Date(new Date().setHours(12, 0, 0, 0));
                                $.extend(dateTime, this.systemDate(), {
                                    hours: thisDate.getHours()
                                    , minutes: thisDate.getMinutes()
                                    , seconds: thisDate.getSeconds()
                                });
                                this.setValue(this.parse()).remove();
                                options.position === 'static' && this.calendar();
                                this.done();
                            }
                        };
                        var newBtn = [
                            '<div class="laydate-footer-btns" style="left: 10px;">'
                            , '<span lay-type="setZero" class="laydate-btns-primary">0点</span>'
                            , '<span lay-type="set12" class="laydate-btns-primary">正午</span>'
                            , '</div>'
                        ];
                        $(newBtn.join('')).insertBefore($(this.footer).find('.laydate-footer-btns').first());
                        $(this.footer).find('.laydate-btns-primary').click(function () {
                            var type = $(this).attr('lay-type');
                            active[type] && active[type].call(layThat);
                        })
                    }
                });
            }
            , renderLaydate5: function () {
                active.resetValue();
                $('#date1').css({width: '300px'});
                laydate.render({
                    elem: '#date1',
                    // type: 'time',
                    range: true,
                    change: function (value, date, endDate) {
                    },
                    ready: function (date) {
                        // 初始会调用
                        var layThat = this;
                        var active = {
                            remove: function () {
                                layThat.remove();
                            }
                        };
                        $('<span lay-type="remove" class="laydate-btns-primary">关闭</span>')
                            .insertBefore($(this.footer).find('.laydate-footer-btns').first().find('span').first());
                        $(this.footer).find('.laydate-btns-primary').click(function () {
                            var type = $(this).attr('lay-type');
                            active[type] && active[type].call(layThat);
                        })
                    }
                });
            }
        };

        $('#tools .layui-btn').click(function () {
            var btnElem = $(this),
                even = btnElem.attr('lay-even');
            if (even && typeof active[even] === 'function') {
                active[even]();
            }
        })
    });
</script>
</body>
</html>
